<template>
  <div>
    <div class="visualization">
      <header>
        <span class="title">仓库管理系统可视化面板</span>
        <div class="info">
          <span>当前时间：{{this.datetime}}</span>
          <el-button size="mini" class="fullscreen" icon="el-icon-full-screen" @click="toggle" circle></el-button>
        </div>
      </header>
      <div class="mainbox">
        <!-- 第一列 -->
        <div class="column">
          <div class="panel bar">
            <h2>物料出入（个）</h2>
            <div class="chart">加载中...</div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line">
            <h2>图表2</h2>
            <div class="area">
              
            </div>
            <div class="chart">加载中...</div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie">
            <h2>图表3</h2>
            <div class="chart">加载中...</div>
            <div class="panel-footer"></div>
          </div>
        </div>
        <!-- 第二列 -->
        <div class="column">
          <div class="no">
            <div class="no-hd">
              <ul>
                <li>100203</li>
                <li class="danger">64</li>
              </ul>
            </div>
            <div class="no-bd">
              <ul>
                <li>仓库物料总数（个）</li>
                <li>今日入库数（个）</li>
              </ul>
            </div>
          </div>

          <!-- 地图模块 -->
          <div class="map">
            <div class="chart"></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
          </div>
        </div>
        <!-- 第三列 -->
        <div class="column">
          <div class="panel bar2">
            <h2>图表4</h2>
            <div class="chart">加载中...</div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel line2">
            <h2>图表5</h2>
            <div class="chart">加载中...</div>
            <div class="panel-footer"></div>
          </div>
          <div class="panel pie2">
            <h2>图表6</h2>
            <div class="chart">加载中...</div>
            <div class="panel-footer"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import fullscreen from 'vue-fullscreen'
import Vue from 'vue'
Vue.use(fullscreen)
export default {
  data() {
    return {
      activeName: 'first',
      fullscreen:false,
      timer: '',
      datetime: ''
    };
  },
  methods: {
    // 点击实现全屏
    toggle () {
      this.$fullscreen.toggle(this.$el.querySelector('.visualization'), {
        wrap: true,
        background: '#fff',
        callback: this.fullscreenChange
      })
    },
    fullscreenChange (fullscreen) {
      this.fullscreen = fullscreen
    },

    // 左一柱状图
    myEcharts(){
		  let myChart = echarts.init(document.querySelector('.bar .chart'));
      let option = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "10px",
          containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ["周一","周二","周三","周四","周五","周六","周日"],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12" },
                axisLine: { 
                  show: false
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                  color: "rgba(255,255,255,.6)",
                  fontSize: "12"
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 1,
                    type: "solid"
                  }
                },
                splitLine: {
                  lineStyle: {
                    color: "rgba(255,255,255,.1)"
                  }
                }
            }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '20px',
            data: [-45, 123, 38, -31, 47, 87, -95],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                // color: function(params){//展示正值的柱子，负数设为透明
                //     let colorArr = params.value > 0?['rgba(0,244,255,1)', 'rgba(0,77,167,1)']:['rgba(0,77,167,1))', 'rgba(0,244,255,1)']
                //     return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //         offset: 0,
                //         color: colorArr[0] // 0% 处的颜色
                //     }, {
                //         offset: 1,
                //         color:  colorArr[1]// 100% 处的颜色
                //     }], false)
                // },
                barBorderRadius: [5, 5, 5, 5],
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
              }
            }
          }
        ]
      };
      myChart.setOption(option);
		  }
  },
  mounted() {
    this.myEcharts()
    /* 每秒定时刷新 */
    this.timer = setInterval(() => {
      this.datetime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")
      // console.log(this.datetime)
    }, 1000)
  },
  beforeDestroy() {
    /* 离开页面前销毁定时器 */
    if(this.timer){
      clearInterval(this.timer);
    }
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url('~@/assets/fonts/DS-DIGIT.TTF')
}
.visualization {
  background: url('~@/assets/images/bg.jpg') no-repeat top center;
  background-size: 100% 100%;
  color: #fff;
  height: 100vh;
  header {
    position: relative;
    background: url('~@/assets/images/head_bg.png') no-repeat top center;
    background-size: 100% 100%;
    text-align: center;
    height: 6rem;
    line-height: 6rem;
    padding-bottom: 0.5rem;
    .title {
      margin: 0;
      font-size: 2.5rem;
      letter-spacing: 4.5px;
      font-weight:700;
    }
    .info {
      position: absolute;
      top: 0;
      right: 1rem;
      line-height: 6rem;
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.7);
      .fullscreen {
        margin-left: 1rem;;
      }
    }
  }
  .mainbox {
    display: flex;
    margin: 0 auto;
    padding: 0 0.5rem 0;
    .column {
      flex: 3;
    }
    .column:nth-child(2) {
      flex: 5;
      margin: 0 0.25rem 0.25rem;
      overflow: hidden;
    }
    .panel {
      position: relative;
      height: 27.5vh;
      padding: 0.5rem 0.25rem 0.5rem;
      border: 1px solid rgba(25, 186, 139, 0.17);
      margin-bottom: 0.8rem;
      background: url('~@/assets/images/line(1).png') rgba(255, 255, 255, 0.03);
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
        content: "";
      }
      .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &::before {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
        &::after {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
        }
      }
      h2 {
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
      }
      .area {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        a {
          color: #fff;
          text-decoration: none;
          margin: -10px 10px 5px 10px;
          font-size: 12px;
        }
      }
      .chart {
        height: 100%;
        width: 100%;
      }
    }
  }
  // 数字模块
  .no {
    position: relative;
    background: rgba(101, 132, 226, 0.1);
    padding: 0.1875rem;
    .no-hd {
      border: 1px solid rgba(25, 186, 139, 0.17);
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
        width: 0.375rem;
        height: 10px;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
        width: 0.375rem;
        height: 10px;
        content: "";
      }
      ul {
        display: flex;
        li {
          position: relative;
          flex:1;
          line-height: 4rem;
          font-size: 4rem;
          color: #ffeb7b;
          text-align: center;
          padding: 0.05rem 0;
          font-family: electronicFont;
          font-weight: bold;
          &:first-child::after {
            content: "";
            position: absolute;
            height: 50%;
            width: 1px;
            background: rgba(255, 255, 255, 0.2);
            right: 0;
            top: 25%;
          }
        }
      }
    }
    .danger {
      color: red!important;
    }
    .no-bd ul {
      display: flex;
      li {
        flex: 1;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.7);
        padding-top: 0.125rem;
      }
    }
  }
}
</style>